<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" session="false"%>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css"
	href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript"
	src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
function isRender(p){
	alert(p.title + "被渲染了");
}
Ext.onReady(function(){
	// Ext.Tabpanel：选项卡面板
	// deferredRender延迟渲染，面板打开才被渲染
	var id=0;
	var tabpanel = new Ext.TabPanel({
		activeTab: 1,
		enableTabScroll: true,
		//deferredRender: false, //一次性全部渲染
		tabPosition: "bottom", // "top"
		bbar: [
		    {text: "添加面板", handler: function(){
		    	id++;
		    	tabpanel.add({id: "tab"+id, title: "面板x", html: "内容x", closable: true});
		    	// 并激活
		    	tabpanel.setActiveTab("tab"+id);
		    }},
		    {text: "删除面板", handler: function(){
		    	var tab = tabpanel.getActiveTab();
		    	tabpanel.remove(tab);
		    }}
		],
		items: [
			{title: "面板1", html: "内容1", listeners:{render: isRender}},
			{title: "面板2", autoLoad: "new.html", listeners:{render: isRender}},
			{title: "面板3", html: "内容3", closable: true, listeners:{render: isRender}}
		]
	});
	new Ext.Viewport({layout:"fit", items: tabpanel});
});
</script>
</body>
</html>
